<template>
  <v-carousel :cycle="false" hide-controls>
    <v-carousel-item v-for="header in headers" :key="header.name">
      <v-container fluid>
        <h3 class="display-3 secondary--text">{{header.name}}</h3>
        <br/>
        <p class="display-1">{{header.description}}</p>
        <p v-for="(example, i) in header.examples" :key="i" class="display-1">
          <code class="example">{{example}}</code>
        </p>
      </v-container>
    </v-carousel-item>
  </v-carousel>
</template>

<script>
export default {
  data() {
    return {
      headers: [
        {
          name: 'Content-Type',
          description: "提示客户端/浏览器当前请求的body是什么格式和字符编码。",
          examples: ['Content-Type: application/json; charset=UTF-8']
        },
        {
          name: 'Set-Cookie',
          description: '不用我说了吧。从这里可以看到，响应的Cookie是带在响应头里的。'
        },
        {
          name: 'Location',
          description: '当响应状态为301或302时，这个头是必须的（参考响应状态）。它指定重定向的URL',
          examples: ['Location: /foo/bar']
        },
        {
          name: 'Content-Encoding',
          description: '当前响应的压缩格式。注意，压缩的只有响应的body。',
          examples: ['Encoding: gzip']
        },
        {
          name: 'Cache-Control',
          description: '提示客户端/浏览器如何缓存当前响应。',
          examples: [
            'Cache-Control: no-cache, no-store',
            'Cache-Control: 99999999, immutable'
          ]
        },
        {
          name: 'ETag',
          description: `当前响应body的指纹，通常用于静态文件响应。现代浏览器会缓存该指纹，下次再发同样的请求时，会在请求头If-None-Match里带上该指纹。
          服务器端在收到请求后，先检查该指纹和即将给出的响应的指纹是否一致，如果不一致，则返回新的响应，同时带上新的ETag。如果一致，则返回304 Not Modified的空响应。`,
          examples: ['ETag: W/"123456abcdef"']
        }
      ]
    }
  }
}
</script>
